<template>
  <div id="cesiumContainer" style='z-index:100;position: absolute;top: 0; bottom: 0;right: 0;left: 0;'>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import ClassifyJson from "../../../../../data/default.json";
//Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjQ5ZThjOS1mNjBhLTRiMzAtOGU0Yi0xMWE5NjQyM2Y3ZjYiLCJpZCI6MTMxOTc5LCJpYXQiOjE2ODA1Njk1MTZ9.2fxItjlczdbOsfcLTE4H5x-viCEZ0-qql5AKlSS-aGE";
//const Cesium = window.Cesium;
let viewer = undefined;
let classifyHandler = undefined; //动态单体化专属handler处理
let selected, primitive, color, show, attribute; //动态单体化鼠标移动事件相关对象
let pickSelected, pickPrimitive, pickColor, pickShow, pickAttribute; //动态单体化鼠标点击事件相关对象
onMounted(() => {
      let key =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwZDhhOThhNy0zMzUzLTRiZDktYWM3Ni00NGI5MGY2N2UwZDUiLCJpZCI6MjQzMjYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODUwMzUwNDh9.DYuDF_RPKe5_8w849_y-sutM68LM51O9o3bTt_3rF1w";
    Cesium.Ion.defaultAccessToken = key;
    viewer = new Cesium.Viewer("cesiumContainer", {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      }),
      terrainProvider: Cesium.createWorldTerrain(),
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      navigationHelpButton: false,
      animation: false,
      timeline: false,
      fullscreenButton: false,
      vrButton: false,
      //关闭点选出现的提示框
      selectionIndicator: false,
      infoBox: false,
    });
    viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    initModel();
    classify();
    classifyHandlerOff();
    classifyHandlerOn();
    })
    function initModel() {
      let tilesetModel = new Cesium.Cesium3DTileset({
        url: '../../../../../data/model/tileset.json',
      });
      viewer.scene.primitives.add(tilesetModel);
      viewer.flyTo(tilesetModel);
    }
    function classify() {
      let ldCollection = new Cesium.PrimitiveCollection();
      
      viewer.scene.primitives.add(ldCollection);
      ClassifyJson.items.map((value) => {
        let classificationPrimitive = addPrimitive(value);
        ldCollection.add(classificationPrimitive);
      });
    }
    // 添加分类对象
    function addPrimitive(item) {
      let classificationPrimitive = new Cesium.ClassificationPrimitive({
        geometryInstances: new Cesium.GeometryInstance({
          // 多边形对象
          geometry: new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy( // hierarchy层次
              Cesium.Cartesian3.fromDegreesArray(item.coordinates) // 多边形控制点的经纬度，按顺时针排列
            ),
            extrudedHeight: 1000, // extruded 压制
            vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
          }),
          //顶点着色器属性
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              new Cesium.Color(1, 1, 1, 1e-4)
            ),
            show: new Cesium.ShowGeometryInstanceAttribute(true), //确定是否显示几何实例
          },
          id: item.id,
        }),

        classificationType: Cesium.ClassificationType.BOTH, //是否影响地形
      });
      return classificationPrimitive;
    }
    // 关闭动态单体化
    function classifyHandlerOff() {
      if (classifyHandler) classifyHandler.destroy();
      classifyHandler = undefined;
      if (Cesium.defined(pickSelected)) {
        pickAttribute =
          pickPrimitive.getGeometryInstanceAttributes(pickSelected);
        pickAttribute.color = pickColor;
        pickAttribute.show = pickShow;
        pickPrimitive = void 0;
        pickColor = void 0;
        pickSelected = void 0;
        pickShow = void 0;
      }
    }
    // 开启动态单体化
    function classifyHandlerOn() {
      if (classifyHandler) classifyHandler.destroy();
      classifyHandler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

      //鼠标移动
      classifyHandler.setInputAction((move) => {
        let pick = viewer.scene.pick(move.endPosition);
        if (Cesium.defined(pick) && Cesium.defined(pick.id)) {
          if (selected === pick.id || pick.id === pickSelected) {
            return;
          }
          if (Cesium.defined(selected)) {
            attribute = primitive.getGeometryInstanceAttributes(selected);
            attribute.color = color;
            attribute.show = show;
            selected = void 0;
            primitive = void 0;
            color = void 0;
            show = void 0;
          }
          if (
            Cesium.defined(pick.primitive) &&
            Cesium.defined(pick.primitive.getGeometryInstanceAttributes)
          ) {
            selected = pick.id;
            primitive = pick.primitive; // 映射对象
            attribute = primitive.getGeometryInstanceAttributes(selected); // 对象属性
            color = attribute.color; // 颜色属性
            show = attribute.show; // 显示属性
            viewer.scene.invertClassification = true;
            attribute.color = [255, 0, 255, 128];
            attribute.show = [1];
            console.log("移动---在这里自定义鼠标移动到单体上时所触发的事件");
          }
        } else {
          if (Cesium.defined(selected)) {
            attribute = primitive.getGeometryInstanceAttributes(selected);
            attribute.color = color;
            attribute.show = show;
            selected = void 0;
            primitive = void 0;
            color = void 0;
            show = void 0;
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      //鼠标点击
      classifyHandler.setInputAction((pick) => {
        let pickedObj = viewer.scene.pick(pick.position);
        if (Cesium.defined(selected)) {
          attribute = primitive.getGeometryInstanceAttributes(selected);
          attribute.color = color;
          attribute.show = show;
          selected = void 0;
          primitive = void 0;
          color = void 0;
          show = void 0;
        }
        if (Cesium.defined(pickedObj) && Cesium.defined(pickedObj.id)) {
          if (Cesium.defined(pickSelected)) {
            pickAttribute =
              pickPrimitive.getGeometryInstanceAttributes(pickSelected);
            pickAttribute.color = pickColor;
            pickAttribute.show = pickShow;
            pickPrimitive = void 0;
            pickColor = void 0;
            pickSelected = void 0;
            pickShow = void 0;
          }
          if (
            Cesium.defined(pickedObj.primitive) &&
            Cesium.defined(pickedObj.primitive.getGeometryInstanceAttributes)
          ) {
            pickSelected = pickedObj.id;
            pickPrimitive = pickedObj.primitive; // 映射对象
            pickAttribute =
              pickPrimitive.getGeometryInstanceAttributes(pickSelected); // 对象属性
            pickColor = pickAttribute.color; // 颜色属性
            pickShow = pickAttribute.show; // 显示属性
            viewer.scene.invertClassification = true;
            pickAttribute.color = [255, 0, 0, 128];
            pickAttribute.show = [1];
            console.log("点击---在这里自定义鼠标左键点击单体时所触发的事件");
          }
        } else {
          if (Cesium.defined(pickSelected)) {
            pickAttribute =
              pickPrimitive.getGeometryInstanceAttributes(pickSelected);
            pickAttribute.color = pickColor;
            pickAttribute.show = pickShow;
            pickSelected = void 0;
            pickPrimitive = void 0;
            pickColor = void 0;
            pickShow = void 0;
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }
    
  


</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>